<template name="shareview">
	<view>
		<!-- #ifdef H5 -->
		<view class="cu-modal" :class="modalName=='posterModal'?'show':''">
			<view class="cu-dialog w80">
				<block v-if="type=='member'">
					<view class="_poster member-poster" v-if="loading && member" id="_poster" ref="poster">
						<image :src="BASEPATH + '/backend/resources/img/member_share_bg.png'" mode="widthFix" class="w100 margin0"></image>
						<view class=" main">
							<view class="text-right">
								<view class="level">{{member.level.name}}</view>
							</view>
							<view class="flex flex-start margin-lr-lg align-center">
								<view class="cu-avatar lg round">
									<image :src="member.head_portrait2" mode="aspectFill"></image>
								</view>
								<view class="margin-left text-white text-left">
									<view class=" text-lg ">{{member.nickname}}</view>
									<view class="  ">ID：{{member.id}}</view>
								</view>
							</view>
							<view class="tips margin-top-xl">分享给你的朋友扫码会有更多惊喜哦!</view>
							<view class="tips margin-top-xs">邀请码：{{member.id}}</view>
							<view class="text-center margin-top">
								<image :src="qr_code" mode="aspectFill" class="qrcode"></image>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="text-white flex-end margin-bottom">
						点击右上角进行分享
						<image :src="CLOUDPATH+'/gsc/sharejt.png'" mode="aspectFit" class="sharejiao"></image>
					</view>
				</block>

				<image v-if="!loading && previewFile" class="main-img" :src="previewFile" mode="aspectFill" :style="'height:' + mainHeight+'px'"></image>
				<view class="cuIcon cuIcon-roundclose text-white lg margin-top" @tap="modalName=''"></view>
				<view class="text-white">长按保存图片进行分享</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	import html2canvas from '../../common/unit/html2canvas.min.js'
	import QR from '@/common/unit/wxqrcode.js'
	export default {
		name: "shareview",
		components: {
			html2canvas
		},
		props: {
			type: {
				type: String,
				default: 'member'
			}
		},
		created: function(e) {},
		data() {
			return {
				modalName: '',
				id: 0,
				detail: null,
				member: null, // 用户数据
				value: null, // 分享数据
				qr_code: null,
				mainWidth: 0,
				mainHeight: 100,
				loading: true,
				previewFile: '',
				CLOUDPATH: this.$config.cloudPath,
				BASEPATH: this.$http.host(),
			}
		},
		methods: {
			showModal(value, member) {
				this.modalName = 'posterModal'
				if (this.previewFile != '') return
				this.value = value
				this.member = member
				// this.modalName = 'typeModal'
				this.loading = true
				this.createPoster()
			},
			wechatShare() {
				this.modalName = 'wechatModal'
			},
			canvasToImage_H5() {
				html2canvas(document.querySelector('#_poster'), {
					allowTaint: false,
					useCORS: true,
					// height: this.mainHeight,
					// width: this.mainWidth
				}).then(canvas => {
					let previewFile = canvas.toDataURL('image/png')
					this.previewFile = previewFile
					this.loading = false
					uni.hideLoading()
				}).catch((e) => {
					console.log(e)
				});
			},
			createPoster() {
				uni.showLoading({
					title: '海报生成中...'
				})
				let share_url = this.value.share_url
				this.qr_code = QR.createQrCodeImg(share_url, {
					errorCorrectLevel: 'L',
					size: parseInt(300) //二维码大小  
				})
				setTimeout((res) => {
					let info = uni.createSelectorQuery().in(this).select("#_poster")
					info.boundingClientRect((data) => { //data - 各种参数
						this.mainHeight = data.height
						this.mainWidth = data.width

						this.canvasToImage_H5()
					}).exec()
				}, 1000)
			},
		},
	}
	// #endif
</script>

<style>
	.cu-dialog {
		background: none;
	}

	._poster {
		position: relative;
	}

	.member-poster {
		background-color: #f3daa6;
	}

	.member-poster .main {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		overflow: hidden;
		left: 0;
		top: 0;
	}

	.member-poster .main .level {
		display: inline-block;
		background: #FCEFD2;
		padding: 5px 15px;
		border-radius: 0 10px 0 10px;
		color: #B7975E;
	}

	.member-poster .main .tips {
		color: #83693B;
	}

	.member-poster .main .qrcode {
		width: 200px;
		height: 200px;
	}

	.margin0 {
		margin: 0;
	}
</style>
